<template>
  <div id="templateManagementList">
    <h1 class="con-right-title">
      消息模板管理
    </h1>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="运营模板" name="operation">
        <templatesOperating />
      </el-tab-pane>
      <el-tab-pane label="系统模板" name="system">
        <templateSystem />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import templatesOperating from '@component/messageManagement/template/templatesOperating'
import templateSystem from '@component/messageManagement/template/templateSystem'

export default {
  name: 'templateManager',
  msg: '消息模板管理',
  components: {
    templatesOperating,
    templateSystem
  },
  data() {
    return {
      activeName: 'operation'
    }
  },
  mounted() {},
  methods: {
    handleClick(val) {
      this.activeName = val.name
    }
  }
}
</script>
<style lang="less">
#templateManagementList {
  .el-row {
    padding-top: 15px;
  }
  .el-tab-pane {
    padding-top: 15px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 30px !important;
  }
  .el-tabs {
    margin: 0 20px 0 20px !important;
  }
  .el-tabs__item.is-active {
    height: 41px;
    color: #0d1636 !important;
    border-top: 2px solid #1dc8a4;
  }
  .el-tabs__item:hover {
    color: #1dc8a4 !important;
  }
  .el-form-item__content {
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    @import url('~@common/style/textarea.less');
  }
}
</style>
